<template>
    <view class="cu-custom" :style="bg1">
        <view class="cu-custom-top" :style="top">
            {{ title }}
        </view>
        <slot></slot>
    </view>
</template>

<script>
export default {
    data() {
        return {
            StatusBar: this.StatusBar,
            CustomBar: this.CustomBar
        };
    },
    name: 'cu-custom',
    computed: {
        bg1() {
            const color = this.color;
            const bgColor = this.bgColor;
            return `color:${color};background-color:${bgColor};`;
        },
        top() {
            const StatusBarH = this.StatusBar.statusBarHeight;
            const CustomBar = this.CustomBar;
            const height = (CustomBar.top - StatusBarH) * 2 + CustomBar.height
            // const padR = (this.StatusBar.windowWidth - CustomBar.right) * 2 + CustomBar.width
            const padR = 0
            return `padding-top:${StatusBarH}px;padding-right:${padR}px;height:${height}px;`;
        },
    },
    props: {
        color: {
            type: String,
            default: '#fff'
        },
        bgColor: {
            type: String,
            default: '#25d5c0'
        },
        title: {
            type: String,
            default: ''
        },
    },
}
</script>

<style lang="scss" scoped>
.cu-custom {
    display: flex;
    flex-direction: column;

    &-top {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36rpx;
    }
}
</style>
